import React, {Component, lazy, Suspense} from 'react'

import {NavLink, Route} from "react-router-dom";
import Loading from "./Loading";			// Loading 组件不能使用懒加载的方式

const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

export default class Demo extends Component {

	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							<NavLink activeclassname="active" className="list-group-item " to="/about">About</NavLink>
							<NavLink activeclassname="active" className="list-group-item " to="/home">Home</NavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								<Suspense fallback={<Loading />}>
									<Route path="/about" component={About}/>
									<Route path="/home" component={Home}/>
								</Suspense>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}
